<script setup lang="ts">
import { ref } from 'vue';


interface User {
    date: string
    name: string
    address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

const tableData: User[] = [
    {
        name: '小米13',
        price: '4599',
        num: '1',
        specs: '黑色,4G,128G'
    }, {
        name: '华为play6',
        price: '1599',
        num: '2',
        specs: '黑色,2G,32G'
    },
    {
        name: '荣耀6',
        price: '1599',
        num: '1',
        specs: '黑色,2G,32G'
    },
    {
        name: '华为9',
        price: '1599',
        num: '1',
        specs: '黑色,2G,32G'
    },
    {
        name: '红米plus3',
        price: '1599',
        num: '1',
        specs: '黑色,2G,32G'
    },

]


</script>

<template>
    <div style="margin: 50px 500px 0 500px;">
        <h1 class="mx-1" size="large" style="margin-bottom: 40px;">购物车</h1>
        <el-table ref="multipleTableRef" size="large" :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="商品名" width="120" />
            <el-table-column property="price" label="价格" />
            <el-table-column property="num" label="数量" />
            <el-table-column property="specs" label="规格" />
        </el-table>
        <h1 style="margin: 40px 0;">选中总价： <span style="color: red">4599.00</span> 元</h1>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])" type="danger">删除</el-button>
            <el-button @click="toggleSelection()" type="primary">下单</el-button>
        </div>
    </div>
</template>

<style scoped></style>
